<template>
    <div class="ChangeForm">
        <Row>
            <Col span="24">

            </Col>
            <Form ref="formValidate" :model="formValidate" :label-width="80">
                <Col span="24">
                    <Row>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="申请编号" prop="applyNo">
                                <Input clearable v-model="formValidate.applyNo" placeholder/>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="合同号" prop="contractNo">
                                <Input clearable v-model="formValidate.contractNo" placeholder/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="客户姓名" prop="custName">
                                <Input clearable v-model="formValidate.custName" placeholder/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="处理状态" prop="processStatus">
                                <Select v-model="formValidate.processStatus" placeholder="请选择" clearable>
                                    <Option v-for="(item,index) in dataDict.processStatusDict" :key="index"
                                            :value="item.value">
                                        {{item.title}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="处理方式" prop="treatmentMethod">
                                <Select v-model="formValidate.treatmentMethod" placeholder="请选择" clearable>
                                    <Option v-for="(item,index) in dataDict.treatmentMethodDict" :key="index"
                                            :value="item.value">
                                        {{item.title}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="申请时间" prop="startDate">
                                <DatePicker type="daterange" @on-change="selectstartDate" format="yyyy-MM-dd"
                                            placeholder="请选择"  separator="到" v-model="formValidate.startDates"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                            <FormItem label="结束时间" prop="endDate">
                                <DatePicker type="daterange" @on-change="selectEndDate" format="yyyy-MM-dd"
                                            placeholder="请选择" separator="到"
                                            v-model="formValidate.endDates"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>

                <Col span="24">
                    <div class="contract-close-btns">
                        <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-search"
                                style="margin-right:16px"
                                :loading="loading">查询
                        </Button>
                        <Button type="primary" icon="ios-trash-outline" @click="handleReset('formValidate')">重置</Button>
                    </div>
                </Col>
            </Form>
        </Row>
    </div>
</template>
<script>
    export default {
        props: {
            formValidate: {
                type: Object,
                required: true
            },
            dataDict: {
                type: Object
            },
            loading: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {};
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                // 数据字典
            },
            // 查询
            handleSubmit(name) {
                this.formValidate.pageNumber = 1;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.$emit("getList", this.formValidate);
                    }
                });
            },
            selectstartDate(v) {
                if (v) {
                    this.formValidate.startCreateDate = v[0];
                    this.formValidate.endCreateDate = v[1];
                }
            },
            selectEndDate(v) {
                if (v) {
                    this.formValidate.startFinishDate = v[0];
                    this.formValidate.endFinishDate = v[1];
                }
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.formValidate.pageNumber = 1;
                this.formValidate.applyNo = null;
                this.formValidate.contractNo = null;
                this.formValidate.custName = null;
                this.formValidate.processStatus = null;
                this.formValidate.treatmentMethod = null;
                this.formValidate.startTime = null;
                this.formValidate.endTime = null;
                this.$emit("getList", this.formValidate);
            },


        },
        computed: {}
    };
</script>
<style scoped>
    .export-btn {
        margin-bottom: 16px;
    }

    .contract-close-btns {
        padding-bottom: 28px;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
    }
</style>
